/* 

flex-col  竖向排列
flex-row 水平排列

grow 让元素自动填充剩余空间,元素的拉伸因子
basis 元素的初始大小
shrink 元素的收缩因子
*/
export default function Page(){
  return (
    <div className="bg-slate-400 flex lg:flex-row flex-col w-10/12 mx-auto p-5">
      <div className=" bg-red-500 lg:grow p-5 lg:w-1/2">
        <span >
          Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为 0 1 auto
          </span>
      </div>
      <div className=" bg-slate-400 lg:grow flex flex-col md:flex-row">
        <div className="bg-blue-700 p-5 md:grow flex items-center">
          <span className="md:text-center w-full">
            flex-grow 元素的拉伸因子
            </span>
        </div>
        <div className="bg-purple-700 p-5 md:grow flex items-center">
          <span className="md:text-center w-full">
            flex-shrink 元素的收缩因子
          </span>
        </div>
      </div>
    </div>
  )
}
